import React, { FC } from 'react';

if (process.env.BROWSER) {
    require('./common-head-line.scss');
}

const COM_PREKEY = 'CommonHeadLine';

interface CommonHeadLineProps {
    lineTexts: string[];

    from: string;
    to?: string;
}

const CommonHeadLine: FC<CommonHeadLineProps> = (props) => {
    if ((props.lineTexts?.length ?? -1) <= 0) {
        return null;
    }

    return (
        <div className="head-line">
            {props.lineTexts.map((text, i) => {
                return (
                    <span key={`${COM_PREKEY}_text_${i}`} className="line-text">
                        {text}
                    </span>
                );
            })}

            <span className="range">{`${props.from} - ${
                props.to?.toString()?.trim()?.length > 0 ? `${props.to}` : '至今'
            }`}</span>
        </div>
    );
};

CommonHeadLine.displayName = 'CommonHeadLine';

export { CommonHeadLine, CommonHeadLineProps };
